<!-- 告警分析环形图 -->

<template>
    <div class="alarm-analysis">
        <div ref="alarmChart" class="alarm-chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'AlarmAnalysis',
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
            // 监听窗口大小变化，自适应调整图表
            window.addEventListener('resize', this.handleResize)
        })
    },
    beforeDestroy() {
        // 组件销毁前清理图表实例和事件监听
        window.removeEventListener('resize', this.handleResize)
        if (this.chart) {
            this.chart.dispose()
            this.chart = null
        }
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.alarmChart)

            const option = {
                grid: {
                    left: '8%',
                    right: '4%',
                    top: '8%',
                    bottom: '12%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: { lineStyle: { color: '#999' } },
                    axisLabel: { 
                        color: '#666',
                        rotate: 0,
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { show: false },
                    axisLabel: { color: '#666' },
                    splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } }
                },
                series: [
                    {
                        name: '评分',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            width: 3,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#2ecc71' },
                                { offset: 1, color: '#27ae60' }
                            ])
                        },
                        itemStyle: {
                            color: '#2ecc71'
                        },
                        areaStyle: {
                            opacity: 0.25,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#2ecc71' },
                                { offset: 1, color: 'rgba(46, 204, 113, 0)' }
                            ])
                        },
                        data: [75, 80, 76, 82, 88, 90, 86, 89, 92, 91, 94, 96] // 你自己的数据
                    }
                ]
            }

            this.chart.setOption(option)
        },

        handleResize() {
            // 窗口大小改变时重新调整图表大小
            if (this.chart) {
                this.chart.resize()
            }
        }
    }
}
</script>

<style scoped>
.alarm-analysis {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alarm-chart {
    width: 100%;
    height: 100%;
    min-height: 0;
}
</style>
